﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/documentation.js"></script>
    <meta name="keywords" content="jQuery, Button, Toggle Button, Repeat Button, Link Button, Help Documentation, jQuery Button, JavaScript Button, jQuery Mobile Button" />
    <meta name="description" content="This page represents the help documentation of the jqxNotification, jqxToggleButton, jqxNotification and jqxLinkButton widgets." />
    <title>jqxNotification, jqxToggleButton, jqxNotification and jqxLinkButton API Reference
    </title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
        <div id="properties">
            <h2 class="documentation-top-header">Properties</h2>
            <table class="documentation-table">
                <tr>
                    <th>Name
                    </th>
                    <th>Type
                    </th>
                    <th>Default
                    </th>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span2'>appendContainer</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                If set, specifies the notification container. The value of appendContainer should
                            be a String with the id of the container element preceeded by "#".
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>appendContainer</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ appendContainer: "#container" });</code></pre>
                            <p>
                                Get the <code>appendContainer</code> property.
                            </p>
                            <pre><code>var appendContainer = $('#jqxNotification').jqxNotification('appendContainer');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Lnd7P/">appendContainer is set to "#container"</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span14'>autoOpen</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets whether the notification will open automatically.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>autoOpen</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ autoOpen: true }); </code></pre>
                            <p>
                                Get the <code>notificationOffset</code> property.
                            </p>
                            <pre><code>var autoOpen = $('#jqxNotification').jqxNotification('autoOpen');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fa83W/">autoOpen is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span15'>animationOpenDelay</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>400
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the duration of the notification animation at open.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>animationOpenDelay</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ animationOpenDelay: "fast" }); </code></pre>
                            <p>
                                Get the <code>animationOpenDelay</code> property.
                            </p>
                            <pre><code>var animationOpenDelay = $('#jqxNotification').jqxNotification('animationOpenDelay');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/A3gZA/">animationOpenDelay is set to 600</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span16'>animationCloseDelay</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>800
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the duration of the tooltip animation at close.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>animationCloseDelay</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ animationCloseDelay: 1000 }); </code></pre>
                            <p>
                                Get the <code>animationCloseDelay</code> property.
                            </p>
                            <pre><code>var animationCloseDelay = $('#jqxNotification').jqxNotification('animationCloseDelay');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/SBf88/">animationCloseDelay is set to 1000</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span18'>autoClose</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>true
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets whether the notification will automatically close after duration equal
                            to the autoCloseDelay property.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>autoClose</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ autoClose: false }); </code></pre>
                            <p>
                                Get the <code>autoClose</code> property.
                            </p>
                            <pre><code>var autoClose = $('#jqxNotification').jqxNotification('autoClose');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/sRY73/">autoClose is set to false</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span19'>autoCloseDelay</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>3000
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the duration after which the notification automatically closes (works
                            only if the autoClose property is set to true).
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>autoCloseDelay</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ autoCloseDelay: 1000 }); </code></pre>
                            <p>
                                Get the <code>autoCloseDelay</code> property.
                            </p>
                            <pre><code>var autoCloseDelay = $('#jqxNotification').jqxNotification('autoCloseDelay');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4UBck/">autoCloseDelay is set to 5000</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span23'>blink</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets whether the notification blinks when opened.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>blink</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ blink: true }); </code></pre>
                            <p>
                                Get the <code>blink</code> property.
                            </p>
                            <pre><code>var blink = $('#jqxNotification').jqxNotification('blink');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Ffjfd/">blink is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span4'>browserBoundsOffset</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>5
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets ot gets the notifications' offset from the window bounds.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>browserBoundsOffset</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ browserBoundsOffset: 10 }); </code></pre>
                            <p>
                                Get the <code>browserBoundsOffset</code> property.
                            </p>
                            <pre><code>var browserBoundsOffset = $('#jqxNotification').jqxNotification('browserBoundsOffset');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GSG7q/">browserBoundsOffset is set to 10</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span17'>closeOnClick</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>true
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets whether the notification will close if it is clicked.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>closeOnClick</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ closeOnClick: true }); </code></pre>
                            <p>
                                Get the <code>closeOnClick</code> property.
                            </p>
                            <pre><code>var closeOnClick = $('#jqxNotification').jqxNotification('closeOnClick');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/C8a3M/">closeOnClick is set to false</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span24'>disabled</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets whether the notification is disabled (it cannot be opened).
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>disabled</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ disabled: true }); </code></pre>
                            <p>
                                Get the <code>disabled</code> property.
                            </p>
                            <pre><code>var disabled = $('#jqxNotification').jqxNotification('disabled');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6T2zy/">disabled is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span5'>height</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>'auto'
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets ot gets the notification's height.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>height</code> property.
                            </p>
                            <pre><code>$("#jqxNotification").jqxNotification({ height: 25 });</code></pre>
                            <p>
                                Get the <code>height</code> property.
                            </p>
                            <pre><code>var height = $('#jqxNotification').jqxNotification('height');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dG3Gx/">height is set to "100px"</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span13'>hoverOpacity</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>1
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the notification's opacity when it is hovered with the mouse.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>hoverOpacity</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ hoverOpacity: 10 }); </code></pre>
                            <p>
                                Get the <code>hoverOpacity</code> property.
                            </p>
                            <pre><code>var hoverOpacity = $('#jqxNotification').jqxNotification('hoverOpacity');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/B4PAE/">hoverOpacity is set to 2</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span22'>icon</span>
                    </td>
                    <td>
                        <span>Object</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets an object which specifies a custom notification icon. The icon property
                            is disregarded if template is set.
                            </p>
                            <b>Object fields:</b>
                            <br />
                            <pre><code>width</code></pre>
                            <pre><code>height</code></pre>
                            <pre><code>url</code></pre>
                            <pre><code>padding</code> - specifies the distance from the icon to the content.</pre>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>icon</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ icon: { width: 25, height: 25, url:
                            '../../images/smiley.png', padding: 5} }); </code></pre>
                            <p>
                                Get the <code>icon</code> property.
                            </p>
                            <pre><code>var icon = $('#jqxNotification').jqxNotification('icon');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3JrUf/">icon is set to a custom object</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span11'>notificationOffset</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>5
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the offset between notifications.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>notificationOffset</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ notificationOffset: 10 }); </code></pre>
                            <p>
                                Get the <code>notificationOffset</code> property.
                            </p>
                            <pre><code>var toggled = $('#jqxNotification').jqxNotification('notificationOffset');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/D2G43/">notificationOffset is set to 10</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span12'>opacity</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>0.9
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the notification's opacity.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>opacity</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ opacity: 1 }); </code></pre>
                            <p>
                                Get the <code>notificationOffset</code> property.
                            </p>
                            <pre><code>var opacity = $('#jqxNotification').jqxNotification('opacity');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/M7aRd/">opacity is set to 1</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span3'>position</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>'top-right'
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets the part of the browser window where the notifications will be positioned.
                            The position property is disregarded if appendContainer is set.
                            </p>
                            <b>Possible Values:</b>
                            <br />
                            <pre><code>'top-left'</code></pre>
                            <pre><code>'top-right'</code></pre>
                            <pre><code>'bottom-left'</code></pre>
                            <pre><code>'bottom-right'</code></pre>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>position</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ position: 'top-left' }); </code></pre>
                            <p>
                                Get the <code>position</code> property.
                            </p>
                            <pre><code>var position = $('#jqxNotification').jqxNotification('position');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/the9U/">position is set to "top-left"</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span51'>rtl</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets a value indicating whether widget's elements are aligned to support
                            locales using right-to-left fonts.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>rtl</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ rtl : true }); </code></pre>
                            <p>
                                Get the <code>rtl</code> property.
                            </p>
                            <pre><code>var rtl = $('#jqxNotification').jqxNotification('rtl'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/T9HPA/">rtl is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span20'>showCloseButton</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>true
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets whether to show the notification's close button.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>showCloseButton</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ showCloseButton: false }); </code></pre>
                            <p>
                                Get the <code>showCloseButton</code> property.
                            </p>
                            <pre><code>var showCloseButton = $('#jqxNotification').jqxNotification('showCloseButton');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/R597D/">showCloseButton is set to false</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span21'>template</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>'info'
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the notification template.
                            </p>
                            <b>Possible Values:</b>
                            <br />
                            <pre><code>'info'</code></pre>
                            <pre><code>'warning'</code></pre>
                            <pre><code>'success'</code></pre>
                            <pre><code>'error'</code></pre>
                            <pre><code>'mail'</code></pre>
                            <pre><code>'time'</code></pre>
                            <pre><code>null</code></pre>
                            <p>
                                If template is set to null, the theme setting is applied to the notification. In
                            that case, the notification icon can be set with the icon property.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>template</code> property.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification({ template: 'mail' }); </code></pre>
                            <p>
                                Get the <code>template</code> property.
                            </p>
                            <pre><code>var template = $('#jqxNotification').jqxNotification('template');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5LmXw/">template is set to 'info'</a>
                            </div>
                        </div>
                    </td>
                </tr>



                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span63'>theme</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>''
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets the widget's theme.
                            </p>
                            jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The
                        base stylesheet creates the styles related to the widget's layout like margin, padding,
                        border-width, position. The second css file applies the widget's colors and backgrounds.
                        The jqx.base.css should be included before the second CSS file. In order to set
                        a theme, you need to do the following:
                        <ul>
                            <li>Include the theme's CSS file after jqx.base.css.<br />
                                The following code example adds the 'energyblue' theme.
                                <pre><code>
                                <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.base.css&quot;
                                        type=&quot;text/css&quot; /&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.energyblue.css&quot;
                                        type=&quot;text/css&quot; /&gt; </code></pre>
                                </code></pre>
                            </li>
                            <li>Set the widget's theme property to 'energyblue' when you initialize it. </li>
                        </ul>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/n53BJ/">theme
                                is set to 'energyblue'
                                </a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span1'>width</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>'auto'
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets ot gets the notification's width.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>width</code> property.
                            </p>
                            <pre><code>$("#jqxNotification").jqxNotification({ width: 100 });</code></pre>
                            <p>
                                Get the <code>width</code> property.
                            </p>
                            <pre><code>var width = $('#jqxNotification').jqxNotification('width');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gGzCb/">width is set to "250px"</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td colspan='3' style='width: 100%'>
                        <h2 class="documentation-top-header">Events</h2>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span25'>close</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when the notification is closed.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Bind to the <code>close</code> event by type: jqxNotification.
                            </p>
                            <pre><code>$('#jqxNotification').on('close', function () { // Some code here. }); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/f6wHT/">Bind to the close event by type: jqxNotification.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span26'>click</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when the notification is clicked.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Bind to the <code>click</code> event by type: jqxNotification.
                            </p>
                            <pre><code>$('#jqxNotification').on('click', function () { // Some code here. }); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cZ8AD/">Bind to the click event by type: jqxNotification.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span27'>open</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when the notification is opened.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Bind to the <code>open</code> event by type: jqxNotification.
                            </p>
                            <pre><code>$('#jqxNotification').on('open', function () { // Some code here. }); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Qy6we/">Bind to the open event by type: jqxNotification.</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td colspan='3' style='width: 100%'>
                        <h2 class="documentation-top-header">Methods</h2>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span10'>closeAll</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Closes all notification instances.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code examples</h4>
                            <p>
                                Invoke the <code>closeAll</code> method.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification('closeAll'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/n8yD3/">closes all notifications</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span28'>closeLast</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Closes the last notification instances.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code examples</h4>
                            <p>
                                Invoke the <code>closeLast</code> method.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification('closeLast'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/wQbTE/">closes the last notifications</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span8'>destroy</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Destroys the widget.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code examples</h4>
                            <p>
                                Invoke the <code>destroy</code> method.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification('destroy'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/X7asy/">destroy the notification</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span7'>open</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Opens the widget.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code examples</h4>
                            <p>
                                Invoke the <code>open</code> method.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification('open'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9uxyL/">opens the notification</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span6'>refresh</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Refreshes the widget.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code examples</h4>
                            <p>
                                Invoke the <code>refresh</code> method.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification('refresh'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6CF44/">refresh the notification</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span9'>render</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Renders the widget.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code examples</h4>
                            <p>
                                Invoke the <code>render</code> method.
                            </p>
                            <pre><code>$('#jqxNotification').jqxNotification('render'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/EUUVh/">renders the notification</a>
                            </div>
                        </div>
                    </td>
                </tr>


            </table>
            <br />
        </div>
</body>
</html>
